フィルターを利用する(2)BLUR、DROPSHADOW、GRAY
先週に引き続き、今週もフィルタの使い方です。今週は、「BLUR」(ぼかし)、「DROPSHADOW」(影の作成)、「GRAY」(モノクロ化)という3つのフィルターの使い方を紹介します。

→ 「BLUR」フィルタの使い方
 
「BLUR」フィルタは、画像や文字をぼかすことができるフィルタです。用意されている属性値はadd、direction、strengthの3つです。addでは、ぼかす前の画像を表示する(値:true)、または表示しない(値:false)を指定します。directionは、ぼかしの方向を角度で、strengthはぼかしの強さを整数で指定します。
・元画像<BR>
<IMAGE src="syashin.jpg">
<BR><BR>

・add=true,direction=45,strength=5<BR>
<IMAGE src="syashin.jpg" style="filter:blur(add=true,direction=45,strength=5)">
<BR><BR>

・add=false,direction=45,strength=5<BR>
<IMAGE src="syashin.jpg" style="filter:blur(add=false,direction=45,strength=5)">
<BR><BR><BR>

・add=true,direction=90,strength=20<BR>
<FONT size="6" color="#0000FF">
<DIV style="width=500 ; filter:blur(add=true,direction=90,strength=20)">
文字だってブレちゃいます。
</DIV>
</FONT>

→ 「DROPSHADOW」フィルタの使い方
 
「DROPSHADOW」フィルタは画像や文字に影を落とすフィルタですが、正直なところ、ほとんど文字にしか効果がありません。属性値は、color、offx、offy、positiveの4種類。colorで影の色を指定し、offx、offyで影の位置を指定します。positiveでは「true」または「false」を指定し、通常の影、抜きの影を選択します。
・color=gray,offx=5.offy=5,positive=true<BR>
<DIV style="font-size:30pt ; width=500 ; filter:dropshadow(color=gray,offx=5.offy=5,positive=true)">
文字に影を落とします。
</DIV>

・color=red,offx=10.offy=10,positive=false<BR>
<DIV style="font-size:30pt ; width=500 ; filter:dropshadow(color=red,offx=10.offy=10,positive=false)">
文字に影を落とします。
</DIV></FONT>


→ 「GRAY」フィルタの使い方
 
「GRAY」フィルタは画像や文字をモノクロ化するフィルタです。属性値はありません。あらためてモノクロの画像ファイルを用意しなくても、自由にモノクロ化できるのがメリットです。そのほか、ページの一部をモノクロで表示するといった使い方も考えられます。いろいろと試してみてください。
・元画像<BR>
<IMAGE src="syashin.jpg">
<BR><BR>

・GLAYフィルタ後<BR>
<IMAGE src="syashin.jpg" style="filter:gray()">


PCpylg}Wz O~yz Yahoo yV NTT-X Store

z[y[W NWbgJ[h COiq [ COsI COze